<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>饼状图</title>
  <script src="/js/echarts.min.js"></script>
  <script src="/js/jquery-3.5.1.min.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:450px; height:200px;"></div>
<script type="text/javascript">
  window.onload = function pie() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));


    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
    //声明一个对象
    var list = [];
    var nus = [];
    $.ajax({
      async: true,            //异步请求
      data: {},
      //请求方式get
      type: "GET",
      //请求地址
      url: "/productsaletopN/list",
      //数据，json字符串
      dataType: "json",
      //请求成功
      success: function (result) {
        console.log(result);
        //进行数据的遍历
        $.each(result, function (index, item) {
          //添加数据到对象
          //物品名
          list.push(item.skuId);
          //物品名和数量
          nus.push({
            value: item.paymentAmount,
            name: item.skuId
          });
        });
        console.log(list);
        console.log(nus);
        myChart.hideLoading();    //隐藏加载动画

        var option = {
          title: {
            text: '',
            left: 'center'
          },

          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
            // 计算占比%
          },

          legend: {                 //旁边的小标图
            orient: 'vertical',
            right: 10,
            top: 300,
            //添加物品名
            data: list
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',     // 设置图表类型为饼图
              radius: '55%',      //饼图的半径，外半径为可视区尺寸的长度。
              // roseType: 'angle',           //设置图表类型为南丁格尔图
              avoidLabelOverlap: false,
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                lineStyle: {
                  color: ''
                  // color: 'rgba(200, 0, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20

              },

              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal:{
                  color:function(params) {
                    //自定义颜色
                    var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
                    return colorList[params.dataIndex]
                  }
                }
              },

              data: nus
            }
          ]
        };
        myChart.setOption(option);
      },
      error: function (errorMsg) {
        //请求失败时执行该函数
        alert("图表请求数据失败!");
        myChart.hideLoading();
      }
    });
  };
</script>
</body>
</html>